<template>
  <div class="register page" ref="webview">
    <div class="logo"></div>
    <div class="van-icon van-icon-arrow-left" v-if="!$route.query.member_no" @click="goBark"></div>
    <div class="content">
      <div class="form">
        <div class="input">
          <van-field v-model="form.mobile" clearable placeholder="请输入手机号码" />
        </div>
        <div class="input">
          <van-field v-model="form.code" maxlength="4" clearable placeholder="请输入验证码">
            <span slot="button" class="code" :class="{ disable: !disable }" @click="getCode">{{
              count ? count + 's' : codeText
            }}</span>
          </van-field>
        </div>
        <div class="input">
          <van-field v-model="form.password" clearable :type="isPasswordType ? 'text' : 'password'" placeholder="输入您的登录密码…">
            <span class="showPassWord" slot="bottom" :class="{ active: isPasswordType && form.password }" @click="showPassWord"></span>
          </van-field>
        </div>
        <div class="input">
          <van-field v-model="form.payPass" clearable :type="isPasswordType ? 'text' : 'password'" placeholder="设置支付密码（6位数字）…">
            <span class="showPassWord" slot="bottom" :class="{ active: isPasswordType && form.payPass }" @click="showPassWord"></span>
          </van-field>
        </div>
        <div class="input">
          <van-field v-model="form.recNo" clearable placeholder="请输入邀请人编码" />
        </div>
      </div>
      <div class="submit">
        <van-button round type="info" :loading="isLoading" @click.native="submitRegister" color="#125DFF">注册</van-button>
      </div>
      <div class="reg-text">
        已有帐号,
        <span class="text" @click="goBark">立即登录</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'login',
  data () {
    return {
      form: {
        recNo: ''
      },
      disable: true,
      IsPassword: false,
      isLoading: false,
      height: 0,
      isPasswordType: null,
      colde: '',
      codeText: '发送验证码',
      count: '',
      timer: null
    };
  },
  mounted () {
    this.form.recNo = this.$route.query.member_no;
  },
  methods: {
    goBark () {
      this.$router.push({ path: '/login' });
    },
    showPassWord () {
      if (!this.form.password && !this.form.payPass) {
        return;
      }
      this.isPasswordType = !this.isPasswordType;
    },
    getSMS () {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.disable = false;
        this.timer = setInterval(() => {
          this.count && (this.codeText = '重新获取');
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.disable = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 获取验证码
    getCode () {
      var isPhone = !/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile);
      if (isPhone) {
        this.$toast('请输入正确的手机号!');
        return;
      }
      if (!this.disable) {
        return;
      }
      // this.getSMS();
      this.$API.user
        .sendMsg({
          mobile: this.form.mobile + '',
          type: 1
        })
        .then(res => {
          this.$toast(res.message);
          if (res.code === 0) {
            this.getSMS();
          }
        });
    },
    submitRegister () {
      if (this.isLoading) {
        return;
      }
      var disabled = !/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile);
      if (disabled) {
        // this.$toast.loading();
        this.$toast('请输入正确的手机号!');
        return;
      }
      var _account = this.form.mobile + '';
      var _password = this.form.password + '';
      var _payPass = this.form.payPass + '';
      if (!_account) {
        this.$toast('手机号不能为空');
        return;
      }
      if (!_password) {
        this.$toast('密码不能为空');
        return;
      }
      if (!_payPass) {
        this.$toast('支付密码不能为空');
        return;
      }
      var reg = new RegExp(/^\d{6}$/);
      if (!reg.test(_payPass)) {
        this.$toast('支付密码是6位数字');
        return;
      }
      if (!this.form.recNo) {
        this.$toast('邀请码不能为空');
        return;
      }
      if (!this.form.code) {
        this.$toast('验证码不能为空');
        return;
      }
      // debugger;
      var options = this.form;
      this.isLoading = true;
      this.$API.user.register(options).then(res => {
        if (res.code === 0) {
          // this.$store.dispatch('setLogin', false);
          localStorage.setItem('Token', res.data);
          this.$toast('注册成功');
          this.$router.push({ path: '/my' });
        }
        this.isLoading = false;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.register {
  background-color: #fff;
  height: 100%;
  overflow: hidden;
  .van-icon-arrow-left {
    position: absolute;
    left: 30px;
    top: 50px;
    font-size: 40px;
  }
  .logo {
    width: 156px;
    height: 156px;
    box-sizing: content-box;
    margin: 156px auto 194px;
    background-image: url('/static/img/logo.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
  }
  padding-top: env(safe-area-inset-top);
  .content {
    padding: 0 60px;
    position: relative;
    .reg-text {
      color: #666;
      text-align: center;
      position: absolute;
      bottom: -100px;
      left: 0;
      right: 0;
      .text {
        color: #1989fa;
        font-size: 28px;
      }
    }
  }
  .form {
    border: 1px solid #eee; /*no*/
    border-radius: 8px;
    .van-cell {
      background-color: transparent;
    }
    .input {
      position: relative;
      border-bottom: 1px solid #eee; /*no*/
      .showPassWord {
        display: block;
        width: 40px;
        height: 21px;
        margin-left: 10px;
        background-image: url('/static/images/icon-login-hide.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
      }
      .showPassWord.active {
        background-image: url('/static/images/icon-login-show.png');
      }
    }
    .input:last-child {
      border-bottom: none;
    }
  }
  .submit {
    margin-top: 67px;
    .van-button {
      width: 100%;
      height: 96px;
      .van-button__text {
        font-size: 34px;
      }
    }
  }
}
</style>
